<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.search"
        placeholder="全局搜索"
        style="width:200px;"
        class="filter-item"
        size="mini"
      ></el-input>
      <el-button-group>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handlerFilter"
        >搜索</el-button>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="handleReset"
        >重置</el-button>
      </el-button-group>
    </div>
    <!--表格-->
    <el-table
      v-loading="loadingTableVisible"
      :element-loading-text="loadingTableTitle"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="list"
      border
      size="mini"
    >
      <el-table-column label="编号" prop="id" align="center" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="租户Id" prop="tenantId" align="center" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.tenantId}}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="level" align="center" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.level}}</span>
        </template>
      </el-table-column>
      <el-table-column label="来源" prop="source" align="center" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.source}}</span>
        </template>
      </el-table-column>
      <el-table-column label="消息" prop="serviceName" show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.message}}</span>
        </template>
      </el-table-column>
      <el-table-column label="时长（ms）" prop="executionDuration" align="center" width="90">
        <template slot-scope="scope">
          <span>{{scope.row.executionDuration}}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户端IP地址" prop="creationIpAddress" align="center" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.creationIpAddress}}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户端类型" prop="systemType" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.systemType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行时间" prop="creationTime" align="center" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="80">
        <template slot-scope="{row}">
          <el-button
            type="primary"
            class="list-mini-btn"
            icon="el-icon-search"
            @click="handlerLog(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getClientLogs"
    />
    <!--详情-->
    <el-dialog :visible.sync="dialogLogVisible" title="日志详情">
      <ul class="text-item">
        <li><span class="text-item-title">记录时间：</span>{{ temp.creationTime| parseTime('{y}-{m}-{d} {h}:{i}') }}</li>
        <li v-if="temp.executionDuration"><span class="text-item-title">耗时：</span>{{ temp.executionDuration }} ms</li>
        <li v-if="temp.creationIpAddress"><span class="text-item-title">来源IP：</span>{{ temp.creationIpAddress }}</li>
        <li v-if="temp.clientAddress"><span class="text-item-title">地址：</span>{{ temp.clientAddress }}</li>
        <li v-if="temp.systemType"><span class="text-item-title">系统类型：</span>{{ temp.systemType }}</li>
        <li v-if="temp.browserInfo"><span class="text-item-title">浏览器信息：</span>{{ temp.browserInfo }}</li>
        <li v-if="temp.message"><span class="text-item-title">消息：</span>{{ temp.message }}</li>
        <li v-if="temp.customData"><span class="text-item-title">请求数据：</span>{{ temp.customData }}</li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves";
import { parseTime, parseTableNull } from "@/utils";
import pagination from "@/components/TablePage"; //分页
import { getClientLogList, getClientLogInfo } from "@/api/log";
export default {
  name: "Log",
  components: { pagination },
  directives: { waves },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        search: ""
      },
      list: [],
      total: 0,
      loadingTableVisible: true,
      loadingTableTitle: "拼命加载中",
      dialogLogVisible: false,
      temp: {
        id: undefined,
        message: "",
        executionDuration: undefined,
        creationIpAddress: "",
        clientAddress: "",
        systemType: "",
        browserInfo: "",
        customData: "",
        creationTime: undefined
      }
    };
  },
  created() {
    this.getClientLogs();
  },
  methods: {
    getClientLogs() {
      this.loadingTableVisible = true;
      getClientLogList(this.listQuery)
        .then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.loadingTableVisible = false;
        })
        .catch(() => {
          this.loadingTableVisible = false;
        });
    },
    //搜索事件
    handlerFilter() {
      this.listQuery.page = 1;
      this.getClientLogs();
    },
    // 明细事件
    handlerLog(row) {
      const loading = this.$loading({ text: "正在加载数据..." });
      getClientLogInfo(row.id)
        .then(response => {
          loading.close();
          this.dialogLogVisible = true;
          this.temp = response.data;
        })
        .catch(err => {
          loading.close();
          console.error(err);
        });
    }
  }
};
</script>

